import { Menu } from 'antd';
import { memo, useEffect } from 'react';

import useRoleMenu from './hooks';

interface Props {
  role: number | null;
}

export default memo((props: Props) => {
  const { role } = props;
  const [menu, { setMenuFromRole }] = useRoleMenu();

  useEffect(() => {
    setMenuFromRole(role);
  }, [role]);

  return (
    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['checked']} items={menu} />
  );
});
